<template>
	<view>
		<topbar title="刷新管理" jt_c="2" background="background:#E23C63;color:#fff;"></topbar>
		<view class="content">
			<view style="margin-bottom: 20rpx;">刷新次数</view>
			<u-input style="margin-bottom: 30rpx;" v-model="zd_time" @blur="zongjia(zd_time)" type="number" :border="true" placeholder="请输入刷新次数">
			</u-input>
			
			
			<view class="title dis_f_l_c" style="margin-right: 55.62rpx;">
				<view>间隔时间</view>
				<view style="color: #E23C63;margin-left: 12rpx;">*</view>
			</view>
			<u-input :disabled="true" type="select " v-model="tj_time" :border="true" height="76" @click="jiange_show = true"
				placeholder="请选择间隔时间"></u-input>
			<u-action-sheet :list="actionSheetList" v-model="jiange_show" @click="actionSheetCallback">
			</u-action-sheet>
			
			
			
			
			
			<!-- <view style="margin-bottom: 20rpx;">刷新开始时间</view>
			<u-input @click="rl_show = true" style="margin-bottom: 30rpx;" :disabled="true" v-model="sx_start" type="text"
				:border="true" placeholder="请选择刷新开始时间"></u-input>
			<u-calendar v-model="rl_show" @change="getdata" :maxDate="maxDate" :min-date="minDate"></u-calendar>
			<u-picker mode="time" v-model="start_show" :params="params" @confirm="confirm" @cancel="cancel"></u-picker>
			<view style="margin-bottom: 20rpx;">刷新结束时间</view>
			<u-input @click="rl_show2 = true" style="margin-bottom: 30rpx;" :disabled="true" v-model="sx_end" type="text"
				:border="true" placeholder="请选择刷新结束时间"></u-input> -->

			<u-calendar v-model="rl_show2" @change="getdata2" :maxDate="maxDate" :min-date="minDate"></u-calendar>
			<u-picker mode="time" v-model="end_show" :params="params" @confirm="confirm2" @cancel="cancel2"></u-picker>
			<view class="dis_f_l_c" style="margin-bottom: 60rpx;">
				<view style="margin-right: 20rpx;">单价：{{price}}元/次</view>
				<view style="margin-right: 20rpx;">总计：{{zong_price}}元</view>
				<view style="color: red;" v-if="day_free_num > 0">免费刷新剩余{{day_free_num}}次</view>
			</view>
			<view @click="type_show = true" class="zf_btn dis_f_c_c">支付</view>
			<u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false"
				:dot-enabled="false" v-model="show" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange"
				@backspace="onBackspace">
				<view>
					<view class="u-text-center u-padding-20 money">
						<text>{{zong_price}}</text>
						<text class="u-font-20 u-padding-left-10">{{type_money}}</text>
						<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
							<u-icon name="close" color="#333333" size="28"></u-icon>
						</view>
					</view>
					<view class="u-flex u-row-center">
						<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password"
							:disabled-keyboard="true" @finish="finish"></u-message-input>
					</view>
					<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
				</view>
			</u-keyboard>
			
			<u-popup v-model="type_show" mode="center" width="400" height="300" border-radius="20">
				<view class="dis_f_co_l_c tc_pay">
					<view class="dis_f_l_c" @click="pay_show(1)" style="margin-left: 100rpx;">
						<image src="../../static/mine/lingqian.png" mode=""></image>
						<view>零钱</view>	
					</view>
					<view class="dis_f_l_c" @click="pay_show(2)" style="margin-left: 100rpx;">
						<image src="../../static/mine/lingqian.png" mode=""></image>
						<view>金币</view>	
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		data() {
			return {
				zd_time: '',
				price: 1,
				password: '',
				show: false,
				sx_start: '',
				sx_end: '',
				rl_show: false,
				rl_show2: false,
				minDate: `${year}-${month}-${date}`,
				maxDate: `${year}-${month}-${date + 7}`,
				start_show: false,
				end_show: false,
				params: {
					year: false,
					xmonth: false,
					day: false,
					hour: true,
					minute: false,
					second: false
				},
				start_data:'',
				end_data:'',
				day_free_num:0,
				id:0,
				type:0,
				zong_price:0,
				tj_time: '',
				jiange_show:false,
				actionSheetList: [
					{
						jiange_time:1,
						text: '间隔1分钟'
					},
					{
						jiange_time:3,
						text: '间隔3分钟'
					},
					{
						jiange_time:5,
						text: '间隔5分钟'
					}
				],
				length_time:0,
				
				type_show:false,
				pay_type:0,//支付方式 1 零钱 2 金币
				type_money:'元',
			};
		},
		onLoad(e){
			this.id = e.id;
			this.type = e.type;
		},
		onShow() {
			if (uni.getStorageSync('token') == '') {
				this.$.ti_shi('请先登录账号');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/login/login');
				}, 2000); 
			}
			//获取提交限时
			this.$.ajax(1, 'post', 'index/get_jiange_list', {
			}, (res) => {
				if(res.code == 1){
					this.actionSheetList = res.data
				}else{
						this.$.ti_shi(res.msg);
					}
			})
			this.$.ajax(1, 'post', 'index/getuser', {
				uid:uni.getStorageSync('uid'),
				token:uni.getStorageSync('token')
			}, (res) => {
				if(res.code == 1){
					this.user = res.userinfo;
					this.day_free_num = res.userinfo.refresh_num;
					if (this.type == 1) {
						//获取悬赏后台设置参数
						this.$.ajax(1, 'post', 'task/get_sysconfig', {
						}, (res) => {
							if(res.code == 1){
								if (this.user.isvip > 0) {
									this.price = res.data.vip_refresh_task_money;
									if ((res.data.vip_day_free_refresh_num - this.user.day_free_refresh) > 0) {
										// this.day_free_num = res.data.vip_day_free_refresh_num - this.user.day_free_refresh;
									}
								}else{
									this.price = res.data.refresh_task_money;
									if ((res.data.day_free_refresh_num - this.user.day_free_refresh) > 0) {
										// this.day_free_num = res.data.day_free_refresh_num - this.user.day_free_refresh;
									}
								}
							}else{
									this.$.ti_shi(res.msg);
								}
						})
					}else{
						//获取悬赏后台设置参数
						this.$.ajax(1, 'post', 'index/get_sysconfig', {
						}, (res) => {
							if(res.code == 1){
								if (this.user.isvip > 0) {
									this.price = res.data.vip_shauxin_price;
								}else{
									this.price = res.data.shauxin_price;
								}
							}else{
									this.$.ti_shi(res.msg);
								}
						})
					}
					
				}else{
						this.$.ti_shi(res.msg);
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						}  
					}
			})
		},
		methods: {
			pay_show(e) {
				this.pay_type = e;
				this.show = true;
				this.type_show = false;
				if(e == 1) {
					this.type_money = '元';
				}else{
					this.type_money = '币';
				}
			},
			actionSheetCallback(index) {
				this.tj_time = this.actionSheetList[index].text;
				this.length_time = this.actionSheetList[index].jiange_time;
			},
			zongjia(){
				if (this.day_free_num >= this.zd_time) {
					this.zong_price = 0;
				}else{
					if(this.type == 1){
						this.zong_price = (this.zd_time - this.day_free_num)*this.price;
					}else{
						this.zong_price = (this.zd_time - this.day_free_num)*this.price;
					}
					
				}
			},
			onChange(val) {
				// console.log(this.password)
				if (this.password.length < 6) {
					this.password += val;

				}

				if (this.password.length >= 6) {
					this.pay();
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			showPop(flag = true) {
				this.password = '';
				this.show = flag;
			},
			pay() {
				console.log(this.password)
				if (this.zd_time < 1) {
					this.$.ti_shi('刷新次数不能小于1')
				}
				var int = /^-?[1-9][0-9]*$/;
				if(!int.test(this.zd_time)) {
					this.$.ti_shi('请输入整数')
					return;
				}
				if (this.length_time < 1) {
					this.$.ti_shi('请选择间隔时间')
				}
				// if(this.start_data == '') {
				// 	this.$.ti_shi('请选择开始时间')
				// 	return;
				// }
				// if(this.end_data == '') {
				// 	this.$.ti_shi('请选择结束时间')
				// 	return;
				// }
				if(this.password == ''){
					this.$.ti_shi('请输入密码')
					return;
				}
				if (this.type == 1) {
					if (this.id > 0) {
						this.$.ajax(1, 'post', 'task/set_refresh', {
							uid:uni.getStorageSync('uid'),
							token:uni.getStorageSync('token'),
							password:this.password,
							id:this.id,
							refresh_num:this.zd_time,
							length_time:this.length_time,
							// start_time:this.sx_start,
							// end_time:this.sx_end,
						}, (res) => {
							console.log(res)
							if(res.code == 1){
								this.$.ti_shi(res.msg)
								var that = this;
								setTimeout(function() {
									that.$.open('/pages/xuan_shang/xs_gl');
								}, 2000);
							}else{
								this.password = '';
								this.$.ti_shi(res.msg);
								if(res.code == 9) {
									var that = this;
									setTimeout(function() {
										that.$.open('/pages/login/login');
									}, 2000);
								}  
							}
						})
					}else{
						this.$.ti_shi('参数错误');
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/xuan_shang/xs_gl');
						}, 2000);
					}
				}else{
					if (this.id > 0) {
						this.$.ajax(1, 'post', 'index/checkpaypassword', {
							uid:uni.getStorageSync('uid'),
							token:uni.getStorageSync('token'),
							password:this.password,
							
						}, (res) => {
							console.log(res)
							if(res.code == 1){
								this.$.ajax(1, 'post', 'index/setguangrefresh', {
									uid:uni.getStorageSync('uid'),
									token:uni.getStorageSync('token'),
									id:this.id,
									refresh_num:this.zd_time,
									length_time:this.length_time,
									pay_type:this.pay_type
									// start_time:this.sx_start,
									// end_time:this.sx_end,
								}, (res) => {
									console.log(res)
									if(res.code == 1){
										this.$.ti_shi(res.msg)
										var that = this;
										setTimeout(function() {
											that.$.open('/pages/guang_gao/gg_gl');
										}, 2000);
									}else{
										this.password = '';
										this.$.ti_shi(res.msg);
										if(res.code == 9) {
											var that = this;
											setTimeout(function() {
												that.$.open('/pages/login/login');
											}, 2000);
										}  
									}
								})
								// this.$.ti_shi(res.msg)
							}else{
								this.password = ''
								this.$.ti_shi(res.msg)
							}
							
						})
						
						
						
						
						
					}else{
						this.$.ti_shi('参数错误');
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/guang_gao/gg_gl');
						}, 2000);
					}
				}
				this.show = false
			},
			
			getdata(e) {
				console.log(e.result)
				this.start_data = e.result
				this.start_show = true
			},
			confirm(e){
				this.sx_start = this.start_data + ' ' + e.hour + ':00'
				console.log(this.sx_start)
			},
			cancel(){
				this.sx_start = ''
			},
			getdata2(e) {
				console.log(e.result)
				this.end_data = e.result
				this.end_show = true
			},
			confirm2(e){
				this.sx_end = this.end_data + ' ' + e.hour + ':00'
				
			},
			cancel2(){
				this.sx_end = ''
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		padding: calc(var(--status-bar-height) + 108rpx) 24rpx 0 24rpx;

	}

	.money {
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;

		.close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}

	.tips {
		color: $u-tips-color;
	}

	.zf_btn {
		color: #fff;
		background-color: #E23C63;
		border-radius: 20rpx;
		width: 100%;
		height: 88rpx;
	}
	
	.tc_pay{
		width: 100%;
		// padding: 20rpx;
		height: 100%;
		
		image{
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
			
		}
	}
	.tg_bz {
		position: fixed;
		z-index: 999;
		font-size: 22rpx;
		line-height: 32rpx;
		top: calc(var(--status-bar-height) + 30rpx);
		right: 48rpx;
		color: #fff;
	
		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 6rpx;
		}
	
	}
</style>
